<!-- 饼图 -->
<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div class="tab-group">
      <div 
        class="tab-btn" 
        :class="{ active: currentTab === 'beitai' }"
        @click="switchTab('beitai')"
      >
        北台
      </div>
      <div 
        class="tab-btn" 
        :class="{ active: currentTab === 'bancai' }"
        @click="switchTab('bancai')"
      >
        板材
      </div>
    </div>
    <Echart id="rightCenter" :options="options" class="right_center_inner" ref="charts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: true,
      timer: null,
      currentTab: 'beitai' // 默认选中北台
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    // 切换标签页
    switchTab(tab) {
      this.currentTab = tab
      this.getData()
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

      //只打印一次
      if (!this.timer) {

      }
      
      // 根据当前选中的标签页生成不同的模拟数据
      let mockData
      if (this.currentTab === 'beitai') {
        // 北台数据
        mockData = {
          lockNum: Math.floor(Math.random() * (500 - 300) + 300),
          onlineNum: Math.floor(Math.random() * (1800 - 800) + 800),
          offlineNum: Math.floor(Math.random() * (200 - 50) + 50),
          totalNum: Math.floor(Math.random() * (1000 - 2000) + 1000)
        };
      } else {
        // 板材数据
        mockData = {
          lockNum: Math.floor(Math.random() * (800 - 500) + 500),
          onlineNum: Math.floor(Math.random() * (1200 - 600) + 600),
          offlineNum: Math.floor(Math.random() * (300 - 100) + 100),
          totalNum: Math.floor(Math.random() * (1500 - 2500) + 1500)
        };
      }
      
      this.countUserNumData = mockData
      this.$nextTick(() => {
        this.init()
      })

    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      });
    },
    init() {
      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
      
      // 根据当前标签页设置不同的数据
      let titleText, yAxisData, barData, totalCount
      
      if (this.currentTab === 'beitai') {
        // 北台数据
        titleText = '北台到达车辆总数：' + this.countUserNumData.totalNum + '辆'
        yAxisData = ['北台基地1', '北台基地2', '北台测试基地', '北台空军基地', '北台地下基地']
        barData = [
          Math.floor(Math.random() * 20 + 10),
          Math.floor(Math.random() * 30 + 15),
          Math.floor(Math.random() * 25 + 20),
          Math.floor(Math.random() * 35 + 25),
          Math.floor(Math.random() * 40 + 30)
        ]
        totalCount = this.countUserNumData.totalNum
      } else {
        // 板材数据
        titleText = '板材到达车辆总数：' + this.countUserNumData.totalNum + '辆'
        yAxisData = ['板材基地1', '板材基地2', '板材测试基地', '板材空军基地', '板材地下基地']
        barData = [
          Math.floor(Math.random() * 25 + 15),
          Math.floor(Math.random() * 35 + 20),
          Math.floor(Math.random() * 30 + 25),
          Math.floor(Math.random() * 40 + 30),
          Math.floor(Math.random() * 45 + 35)
        ]
        totalCount = this.countUserNumData.totalNum
      }
      
      this.options = {
        title: {
          text: titleText,
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
            fontWeight: 'bold'
          },
          left: "20%",
          top: '0%',
          textAlign: 'center'
        },
        grid: {
          left: '10%',
          top: '15%',
          right: '2%',
          bottom: '0',
          containLabel: true
        },
        xAxis: [{
          show: false,
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '20',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '14',
            }
          },
          data: yAxisData
        }, {
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '14',
            }
          },
          data: []
        }, {
          axisTick: 'none',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          axisLabel: {
            show: false
          },
          data: [],
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: barData,
          label: {
            normal: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#ffffff',
                fontSize: '14',
              }
            }
          },
          barWidth: 8,
          barCategoryGap: '20%',
          itemStyle: {
            normal: {
              color: function (params) {
                var num = myColor.length;
                return myColor[params.dataIndex % num]
              },
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: [99, 99.5, 99.5, 99.5, 99.5],
          barWidth: 12,
          itemStyle: {
            normal: {
              color: '#0e2147',
              barBorderRadius: 5,
            }
          },
          z: 1
        }, {
          name: '外框',
          type: 'bar',
          yAxisIndex: 2,
          barGap: '-100%',
          data: [100, 100, 100, 100, 100],
          barWidth: 16,
          itemStyle: {
            normal: {
              color: function (params) {
                var num = myColor.length;
                return myColor[params.dataIndex % num]
              },
              barBorderRadius: 5,
            }
          },
          z: 0
        },
        {
          name: '外圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0, 0, 0, 0, 0],
          yAxisIndex: 2,
          symbolSize: 25,
          itemStyle: {
            normal: {
              color: function (params) {
                var num = myColor.length;
                return myColor[params.dataIndex % num]
              },
              opacity: 1,
            }
          },
          z: 2
        }
        ]
      };
      console.log(this.option,"0012");
      
    },
  },
};
</script>
<style lang='scss' scoped>
.tab-group {
  position: absolute;
  top: -28px;
  right: 20px;
  display: flex;
  justify-content: center;
  font-size: 12px;

  .tab-btn {
    width: 50px;
    height: 18px;
    border: 1px solid #00eded;
    color: #00f7f6;
    text-align: center;
    line-height: 18px;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(3, 194, 194, 0.3);
    }

    &.active {
      background-color: #03c2c2;
      color: #fff;
    }
  }
}
</style>